<template>
    <div class="uploadBox" :style="avator?'background:url('+avator+') no-repeat center center;background-size:100%;':(image?'background:url('+image+') no-repeat center center;background-size:100%;':'')">
        <input @change="uploadData" type="file" accept=".png, .jpg, .jpeg,.gif" /> 
        
        <div :class="`uploadCropperModal ${showCropper?'showCropper':''} fill flex justify-between align-center`">
            <div class="cropperBox">
                <vueCropper
                    ref="cropper"
                    :img="cropOptions.img"
                    :outputSize="cropOptions.outputSize"
                    :outputType="cropOptions.outputType"
                    :info="cropOptions.info"
                    :canScale="cropOptions.canScale"
                    :autoCrop="cropOptions.autoCrop"
                    :autoCropWidth="cropOptions.autoCropWidth"
                    :autoCropHeight="cropOptions.autoCropHeight"
                    :fixed="cropOptions.fixed"
                    :fixedNumber="cropOptions.fixedNumber"
                    :full="cropOptions.full"
                    :fixedBox="cropOptions.fixedBox"
                    :canMove="cropOptions.canMove"
                    :canMoveBox="cropOptions.canMoveBox"
                    :original="cropOptions.original"
                    :centerBox="cropOptions.centerBox"
                    :high="cropOptions.high"
                    :infoTrue="cropOptions.infoTrue"
                    :maxImgSize="cropOptions.maxImgSize"
                    :enlarge="cropOptions.enlarge"
                    :mode="cropOptions.mode"
                    @realTime="realTimeHandler">
                </vueCropper>
            </div>
            <div class="viewBox flex justify-center align-center flex-direction">
                <img :src="viewFile" class="img3">
                <img :src="viewFile" class="img2">
                <img :src="viewFile" class="img1">
                <vs-button @click="uploadFileHandler" style="flex:0 0 auto;">
                    确定头像
                </vs-button>
            </div>
        </div>
    </div>
</template>
<script>
import { fileToBase64,blobToFile,extendsParams,extendsEncrypte } from '~/assets/inc/common.js';
import { apis } from '~/assets/inc/apis.js';
export default{
    props:{
        avator:{
            type:String,
            value:'',
        }
    },
    data(){
        return{
            image:'',
            showCropper:false,
            sourfile:null,
            file:null,
            viewFile:null,
            cropOptions:{
                img:'',//裁剪图片的地址
                outputSize:1,//裁剪生成图片的质量
                outputType:'jpeg',//裁剪生成图片的格式
                info:true,//裁剪框的大小信息
                canScale:true,//图片是否允许滚轮缩放
                autoCrop:true,//是否默认生成截图框
                autoCropWidth:200,//默认生成截图框宽度
                autoCropHeight:200,//默认生成截图框高度
                fixed:true,//是否开启截图框宽高固定比例
                fixedNumber:[1,1],//截图框的宽高比例
                full:true,//是否输出原图比例的截图
                fixedBox:false,//固定截图框大小 不允许改变
                canMove:true,//上传图片是否可以移动
                canMoveBox:true,//截图框能否拖动
                original:true,//上传图片按照原始比例渲染
                centerBox:true,//截图框是否被限制在图片里面
                high:true,//是否按照设备的dpr 输出等比例图片
                infoTrue:true,//true 为展示真实输出图片宽高  false 展示看到的截图框宽高
                maxImgSize:2000,//限制图片最大宽度和高度
                enlarge:3,//图片根据截图框输出比例倍数
                mode:'contain',//图片默认渲染方式
            },
        }
    },
    mounted(){
        console.log(this.avator,'AAAAAAAAAD')
    },
    methods:{
        uploadData(e){
            if(!e.target.files[0]) return;
            if (e.target.files[0].size > 1 * 1024 * 1024) { // 限制文件上传大小
                this.$vs.notification({
                    progress: 'auto',
                    color:'danger',
                    position:'bottom-center',
                    title: 'Web Message!',
                    text: `头像大小不能超过 1024(kb)`
                })
            } else {
                this.sourfile = e.target.files[0];//原图
                /*调用工具函数取得图片的base64图片编码*/
                fileToBase64(e.target.files[0], (url) => {
                    this.viewFile = url;
                    this.cropOptions.img = url;
                })
                this.file = blobToFile(e.target.files[0]);
                this.showCropper = true;
                // this.uploadFileHandler(e.target.files[0]);
            }
        },
        //实时预览事件
        realTimeHandler(e){
            // 获取截图的blob数据
            this.$refs.cropper.getCropBlob((data) => {
                /*调用工具函数取得图片的base64图片编码*/
                fileToBase64(data, (url) => {
                    this.viewFile = url;
                })
                this.file = blobToFile(data);
            })
        },
        //上传
        async uploadFileHandler(file){
            this.$store.commit('setLoading',true);
            const params = new FormData();
            params.append("file",this.file);
            const res = await this.$axios.post(apis.oss,params)
            if(res.data.code==200){
                this.image = res.data.message.url.replaceAll('\\','/');
                setTimeout(() => {
                    this.newImagesLibHandler(res.data.message);
                }, 1000);
                this.$emit('onsuccess',res.data.message);
            }else{
                this.$vs.notification({
                    progress: 'auto',
                    color:'danger',
                    position:'bottom-center',
                    title: 'Web Message!',
                    text: res.data.message
                })
            }
            this.$store.commit('setLoading',false);
        },
        //新增图片库图标列表
        newImagesLibHandler(res){
            this.showCropper = false;
            const params = {
                type:1,
                name:res.name,
                path:res.filepath,
                url:res.url,
                size:res.size,
                md5:res.md5,
            }
            extendsEncrypte(params,this.$axios);
            this.$axios.post(apis.osslib,extendsParams(params));
        },
    }
}
</script>
<style lang="scss" scoped>
    .uploadBox{
        width:100px;
        height:100px;
        border-radius: 50%;
        background: url('~/assets/images/avator.png') no-repeat center center;
        background-size: 100%;
        margin-bottom: 20px;
        input{
            width:100px;
            height:100px;
            background:transparent;
            border-radius: 50%;
            font-size: 0;
            margin:0;
            padding:0;
            &::file-selector-button{
                width:100%;
                height:100%;
                background-color: transparent;
                box-sizing: border-box;
                margin:0;
                padding:0;
                cursor: pointer;
                border:none;
            }
        }
        .uploadCropperModal{
            position: fixed;
            left:-100vw;
            top:-100vh;
            background:#f7f7f7;
            transition: 1s all ease;
            z-index: 99999;
            border-radius: 20px;
            padding:20px;
            .cropperBox{
                flex:1 1 auto;
                height:100%;
                margin-right: 20px;
                border-radius: 20px;
                overflow: hidden;
            }
            .viewBox{
                flex:0 0 auto;
                width:200px;
                height:100%;
                .img1{
                    width:100px;
                    height:100px;
                    margin-bottom: 20px;
                }
                .img2{
                    width:100px;
                    height:100px;
                    border-radius: 20px;
                    margin-bottom: 20px;
                }
                .img3{
                    width:100px;
                    height:100px;
                    border-radius: 50%;
                    margin-bottom: 20px;
                }
            }
        }
        .showCropper{
            inset:0;
        }
    }
    @media screen and (min-width:0px) and (max-width:1280px) {
        .uploadBox{
            width:10rem;
            height:10rem;
            border-radius: 50%;
            background: url('~/assets/images/avator.png') no-repeat center center;
            background-size: 100%;
            margin-bottom: 2rem;
            input{
                width:10rem;
                height:10rem;
                background:transparent;
                border-radius: 50%;
                font-size: 0;
                margin:0;
                padding:0;
                &::file-selector-button{
                    width:100%;
                    height:100%;
                    background-color: transparent;
                    box-sizing: border-box;
                    margin:0;
                    padding:0;
                    cursor: pointer;
                    border:none;
                }
            }
            .uploadCropperModal{
                width:100%;
                height:100%;
                position: fixed;
                left:-100vw;
                top:-100vh;
                background:#f7f7f7;
                transition: 1s all ease;
                z-index: 99999;
                border-radius: 0;
                padding:20px;
                flex-flow: column;
                justify-content: center;
                .cropperBox{
                    flex:1 1 auto;
                    width:100%;
                    height:30rem !important;
                    margin-right:0;
                    border-radius:1rem;
                    overflow: hidden;
                }
                .viewBox{
                    flex:0 0 auto;
                    width:100%;
                    height:auto;
                    flex-direction: row;
                    padding-top:2rem;
                    .img1{
                        width:5rem;
                        height:5rem;
                        margin-right: 1rem;
                        margin-bottom: 0;
                    }
                    .img2{
                        width:5rem;
                        height:5rem;
                        margin-right: 1rem;
                        border-radius: 2rem;
                        margin-bottom: 0;
                    }
                    .img3{
                        width:5rem;
                        height:5rem;
                        margin-right: 1rem;
                        border-radius: 50%;
                        margin-bottom: 0;
                    }
                }
            }
            .showCropper{
                inset:0;
            }
        }
    }
</style>